<template>
  <div class="app-container">

    <el-form class="form-container" :inline="true" :model="form"  ref="refForm" label-width="100px">
      <el-row  :gutter="50" >
        <el-col :xs="24" :sm="12">
        <el-form-item class="" label="体育类型：" prop="gameName">
          足球
        </el-form-item>
        <el-form-item label="赛事时间：" prop="subType">
          <el-select v-model="footSelect" filterable value-key="value" @change="changeFootSelect">
            <el-option v-for="item in next_days"
                       :key="`${item.value}basket`"
                       :label="item.title"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="help">PS：勾选的推送首页则在前台首页体育赛事内显示，勾选推送热门则在前台首页热门赛事内显示
      赛事展示为今日的赛事（今日 = 今日中午12:00:00 至 次日11:59:59）
      勾选早盘赛事后，赛事当日中午12:00:00显示
      </div>
        <div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item v-for="(game,index) in footbalGameList" :key="`${index}footitem`" :title="game[0].event" :name="game[0].event">
              <el-row v-for="item in game" :key="item.mid+index">
                <el-col :span="12"><span>{{item.home}}</span>　　VS　　<span>{{item.away}}</span></el-col>
                <el-col :span="12">
                  <!-- <el-checkbox-group> -->
                    <el-checkbox  :checked="item.isHot!=0  ? true :false" @change="setHot('',item)" :disabled="!roleCheck('push')">推送热门</el-checkbox>
                    <el-checkbox  :checked="item.isRec!=0 ? true :false" @change="setRec('',item)" :disabled="!roleCheck('push')">推送首页</el-checkbox>
                  <!-- </el-checkbox-group> -->
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
        </el-col>
        <el-col :xs="24" :sm="12" >
        <el-form-item class="" label="体育类型：" prop="gameName">
          篮球
        </el-form-item>
        <el-form-item label="赛事时间：" prop="subType">
          <el-select v-model="basketSelect" value-key="value" filterable  @change="changeBasketSelect">
            <el-option v-for="item in next_days"
                       :key="`${item.value}basket`"
                       :label="item.title"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="help">PS：勾选的推送首页则在前台首页体育赛事内显示，勾选推送热门则在前台首页热门赛事内显示
          赛事展示为今日的赛事（今日 = 今日中午12:00:00 至 次日11:59:59）
          勾选早盘赛事后，赛事当日中午12:00:00显示
        </div>


        <div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item v-for="(game,index) in basketballGameList"  :key="`${index}basketitem`" :title="game[0].event" :name="game[0].event">
              <el-row  v-for="item in game" :key="item.mid+index">
                <el-col :span="12"><span>{{item.home}}</span>　　VS　　<span>{{item.away}}</span></el-col>
                <el-col :span="12">
                 <!-- <el-checkbox-group> -->
                    <el-checkbox  :checked="item.isHot!=0  ? true :false" @change="setHot('',item)">推送热门</el-checkbox>
                    <el-checkbox  :checked="item.isRec!=0 ? true :false" @change="setRec('',item)">推送首页</el-checkbox>
                  <!-- </el-checkbox-group> -->
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
        </el-col>
      </el-row>
      <!-- <el-button v-loading="loading" style="margin: 10px 30px ;float: right" type="primary"
                 @click="doSave({
                 action: 'saveForm',
                 form: {
                 name: 'refForm',
                 scrollToError: true
                 }})">确定
      </el-button> -->
    </el-form>
  </div>
</template>

<script>

  import Cookies from 'js-cookie'
  import {
    gameHotGameSetDetailApi as getApi,
    gameHotGameSetSaveApi as saveHotApi,
    gameRecGameSetSaveApi as saveRecApi,
    gameHotRecGameSetSaveApi as saveHotRecApi,
  } from '@/services/api/game'
  import {form} from '@/build'

  export default {
    name: 'hot-game-config',

    mixins: [form],

    props: [],

    data() {
      return {
        activeName: undefined,
        next_days: [],
        footbalGameList: [],
        basketballGameList: [],
        // uploadApi: api.UPLOAD_PIC + '?token=' + Cookies.get(consts.CACHE_TOKEN) + '&uid=' + Cookies.get(consts.CACHE_UID),
        form: {
          gameId: this.gameId,
          date: this.date,
          subType: this.subType,
          logo: this.logo,
        },
        footSelect:{},
        basketSelect:{},
        configData:{},
        footFilters:{
          gameId:1,
          type:1,
          date:undefined
        },
        basketFilters:{
          gameId:2,
          type:1,
          date:undefined
        },
        gameIdAll:[
            1,//足球
            2,//篮球
            3,//网球
            5,//高尔夫
            6,//彩票
            7,//美式足球
            8,//拳击格斗
            9,//羽毛球
            10,//金融投注
            13,//排球
            14,//橄榄球
            16,//手球
            17,//赛车
            18,//板球
            19,//沙滩足球
            21,//斯诺克
            23,//电子竞技
            25,//飞镖
            26//冰球
        ]
      }
    },
    mounted() {
      let self=this;
      this.bindGet(getApi, 'footbalGameList', {
        action: 'getFootGrid',
        sendingData: 'footFilters',
        format:data => {
          return self.groupData(data)
        }
      });
      this.bindGet(getApi, 'basketballGameList', {
        action: 'getBasketGrid',
        sendingData: 'basketFilters',
        format:data => {
          return self.groupData(data)
        }
      });
      this.bindSave(getApi, 'configData', 'form', {
        afterSuccess: () => {
          this.$emit('on-success');
        }
      });
      this.doGet({action: 'getFootGrid'})
      this.doGet({action: 'getBasketGrid'})

      this.getDateList();
    },
    methods: {
      setRec(val,item){
        let self=this
        saveRecApi({id:item.id,isRec:item.isRec === 0 ? 1:0}).then(data=>{
          if(data[0]){
            this.$message({
              message: '推送首页成功',
              type: 'success'
            })
            this.doGet({action: 'getFootGrid'})
          }else{
            this.$message({
              message: '推送首页失败',
              type: 'warning'
            })
          }
        })
      },
      setHot(val,item){
        saveHotApi({id:item.id,isHot:item.isHot === 0 ? 1:0}).then(data=>{
          if(data[0]){
            this.$message({
              message: '推送热门成功',
              type: 'success'
            })
            this.doGet({action: 'getFootGrid'})
          }else{
            this.$message({
              message: '推送热门失败',
              type: 'warning'
            })
          }
        })
      },
      changeFootSelect(item){
        this.footFilters.type=item.value === 0 ? 1 : 2;
        this.footFilters.date=item.date;
        this.doGet({action: 'getFootGrid'})
      },
      changeBasketSelect(item){
        this.basketFilters.type=item.value === 0 ? 1 : 2;
        this.basketFilters.date=item.date;
        this.doGet({action: 'getBasketGrid'})
      },
      getDateList(){
        let date=new Date();
        this.next_days.push({title:"今日",value:0,type:1,date:_.toTime(date.getTime())});
        for(let i=1;i<3;i++){
          date.setDate(date.getDate()+1);
          this.next_days.push({title:_.toTime(date.getTime(),"MM月DD日"),value:i,type:1,date:_.toTime(date.getTime())});
        }
        this.footSelect=this.basketSelect=this.next_days[0];
      },
      groupData(dataList){
       return  _.groupBy(dataList,"eid")
      }
    },
  }
</script>

<style lang="scss" scoped>
  .help{
    color: #666;
    font-size: 14px;
    line-height: 20px;
  }
</style>
